<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <el-row class="header navbar bg-white shadow" style="position: relative">
        <!--时间搜索-->
        <div class="btn-group tool-button mt5">
            <el-date-picker
                    v-model="searchDate"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="medium"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
        </div>
        <!--按玩法搜索-->
        <div class="btn-group tool-button mt5">
            <el-select v-model="pageForm.betType" placeholder="请选择订单类型"
                       size="medium"
            >
                <el-option
                        v-for="item in betTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <!--按订单状态搜索-->
        <div class="btn-group tool-button mt5">
            <el-select v-model="pageForm.orderStatus" placeholder="请选择订单状态"
                       size="medium"
            >
                <el-option
                        v-for="item in orderStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <!--按日期类型搜索-->
        <div class="btn-group tool-button mt5">
            <el-select v-model="pageForm.matchStage" placeholder="请选择日期类型"
                       size="medium"
            >
                <el-option
                        v-for="item in matchStageOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <div class="btn-group tool-button mt5">
            <el-input v-model="pageForm.searchKeyword" @keyup.enter.native="doSearch" placeholder="用户名、手机、订单号、mid"
                      size="medium"></el-input>
        </div>
        <!--搜索按钮-->
        <div class="btn-group tool-button mt5">
            <el-button slot="append" icon="el-icon-search" @click="doSearch" size="medium"></el-button>
        </div>
        <div class="btn-group tool-button mt5">
            <el-checkbox v-model="isInside">不统计内部账号</el-checkbox>
        </div>
        <div class="btn-group tool-button mt5">
            <el-checkbox v-model="isLose">失利投资</el-checkbox>
        </div>
        <div class="btn-group tool-button mt5">
            <el-checkbox v-model="isProtect">保本投资</el-checkbox>
        </div>
        <div class="btn-group tool-button mt5">
            <el-checkbox v-model="isExp">体验金投资</el-checkbox>
        </div>
    </el-row>
    <!--    表格-->
    <el-row class="el-table-container" style="padding-top: 5px">
        <el-table
                :data="tableData"
                @sort-change='pageOrder'
                size="small"
                :summary-method="getSummaries"
                border
                show-summary
                header-align="center"
                style="width: 100%"

        >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="el-table-expand-line" label-width="100px">
                        <el-form-item label="皇冠mid">
                            <span>{{ props.row.mid }}</span>
                        </el-form-item>
                        <el-form-item label="比赛时间(美东)">
                            <span>{{ props.row.dateTime }}</span>
                        </el-form-item>
                        <el-form-item label="比赛阶段">
                            <span v-if="props.row.stage == 'browse'">今日</span>
                            <span v-else-if="props.row.stage == 'future'">明日</span>
                            <span v-else-if="props.row.stage == 'finished'">已结束</span>
                            <span v-else-if="props.row.stage == 'other'">赛事异常</span>
                        </el-form-item>
                        <el-form-item label="联赛名称">
                            <span>{{ props.row.league }}</span>
                        </el-form-item>
                        <el-form-item label="比赛队伍">
                            <span>{{ props.row.home + ' VS ' + props.row.custom }}</span>
                        </el-form-item>
                        <el-form-item label="上半场比分">
                            <span v-if="props.row.hInBallHalf">{{ props.row.hInBallHalf + ':' + props.row.cInBallHalf }}</span>
                            <span v-else>暂无</span>
                        </el-form-item>
                        <el-form-item label="全场比分">
                            <span v-if="props.row.hInBallFull">{{ props.row.hInBallFull + ':' + props.row.cInBallFull }}</span>
                            <span v-else>暂无</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <!--        昵称-->
            <el-table-column
                    prop="nickName"
                    label="昵称"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <!--        昵称-->
            <el-table-column
                    prop="userName"
                    label="用户名"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <!--        手机号码-->
            <el-table-column
                    sortable
                    prop="phone"
                    label="手机"
                    header-align="center"
                    align="center">
            </el-table-column>
            <!--        订单号-->
            <el-table-column
                    sortable
                    label="订单号"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    {{scope.row.no}}
                </template>
            </el-table-column>
            <!--        订单状态-->
            <el-table-column
                    sortable
                    label="订单状态"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    {{scope.row.status == 'WAIT_SETTLE' ? '待结算' : scope.row.status == 'SETTLED' ? '已结算' : '已取消'}}
                </template>
            </el-table-column>
            <!--        投资类型-->
            <el-table-column
                    label="投资类型"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center"
            >
                <template slot-scope="scope">
                    {{scope.row.type == 'FULL_PD' ? '全场波胆' : scope.row.type == 'HALF_PD' ? '半场波胆' : '总得分'}}
                </template>
            </el-table-column>
            <!--        投资选项-->
            <el-table-column
                    label="投资选项"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center"
            >
                <template slot-scope="scope">
                    {{scope.row.betContent}}
                </template>
            </el-table-column>
            <!--       投资金额-->
            <el-table-column
                    sortable
                    label="投资金额"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    {{scope.row.amount}}
                </template>
            </el-table-column>
            <!--       年化利率-->
            <el-table-column
                    sortable
                    label="年化利率"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    {{scope.row.rate}}
                </template>
            </el-table-column>
            <!--       服务费-->
            <el-table-column
                    sortable
                    label="服务费"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    {{scope.row.serviceFee}}
                </template>
            </el-table-column>
            <!--       是否保本-->
            <el-table-column
                    label="是否保本"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.protect">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <!--       体验金投资-->
            <el-table-column
                    label="体验金投资"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.expInvest">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <!--       结算金额-->
            <el-table-column
                    sortable
                    label="结算金额"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <i v-if="scope.row.resultAmount <= 0" class="text-success">{{scope.row.resultAmount}}</i>
                    <i v-else class="text-danger">{{scope.row.resultAmount}}</i>
                </template>
            </el-table-column>
            <!--        投资时间-->
            <el-table-column
                    prop="ctAt"
                    label="投资时间"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    {{formatAt(scope.row.ctAt)}}
                </template>
            </el-table-column>
            <!--        结算时间-->
            <el-table-column
                    prop="settleAt"
                    label="结算时间"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    {{formatAt(scope.row.settleAt)}}
                </template>
            </el-table-column>
            <!--            &lt;!&ndash;        备注&ndash;&gt;-->
            <!--            <el-table-column-->
            <!--                    prop="remark"-->
            <!--                    label="备注"-->
            <!--                    header-align="center"-->
            <!--                    :show-overflow-tooltip="true"-->
            <!--                    align="center">-->
            <!--            </el-table-column>-->
            <!--            操作下拉菜单-->
            <el-table-column
                    label="操作"
                    width="120"
                    align="center">
                <template slot-scope="scope">
                    <el-dropdown v-if="scope.row.status == 'WAIT_SETTLE'" @command="dropdownCommand">
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu vslot="dropdown">
                            <!--                            <el-dropdown-item :command="{type:'editDo',row:scope.row}">-->
                            <!--                                修改备注-->
                            <!--                            </el-dropdown-item>-->
                            <el-dropdown-item divided :command="{type:'manual',orderNo:scope.row.no,id:scope.row.id}">
                                手动结算
                            </el-dropdown-item>
                            <!--                            <el-dropdown-item :command="{type:'revert',id:scope.row.id,orderNo:scope.row.no}">-->
                            <!--                                撤销投资-->
                            <!--                            </el-dropdown-item>-->
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--    分页容器-->
    <el-row class="el-pagination-container">
        <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageNumberChange"
                :current-page="pageForm.pageNumber"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
    <!--    修改按钮弹出的dialog-->
    <el-dialog
            :title="'修改'"
            :visible.sync="editDialogVisible"
            :close-on-click-modal="false"
            width="40%">
        <el-form :model="formData" ref="editForm" :rules="formRules" size="small" label-width="80px">
            <el-form-item :label="'备注'">
                <el-input maxlength="100" :placeholder="''"
                          v-model="formData.remark"
                          auto-complete="off"
                          tabindex="1"
                          type="text"
                >
                </el-input>
            </el-form-item>
        </el-form>
        <!--        确认/取消 提交修改按钮-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doEdit">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    page = new Vue({
        el: "#app",
        data: function () {
            return {
                betTypeOptions: [{
                    value: '',
                    label: '投资类型'
                }, {
                    value: 'FULL_PD',
                    label: '全场波胆'
                }, {
                    value: 'HALF_PD',
                    label: '半场波胆'
                }, {
                    value: 'FULL_GOALS',
                    label: '总得分'
                }],
                orderStatusOptions: [{
                    value: '',
                    label: '结算状态'
                }, {
                    value: 'WAIT_SETTLE',
                    label: '待结算'
                }, {
                    value: 'SETTLED',
                    label: '已结算'
                }, {
                    value: 'CANCELLED',
                    label: '已取消'
                }],
                matchStageOption: [{
                    value: '',
                    label: '赛事阶段'
                }, {
                    value: 'BROWSE',
                    label: '今日'
                }, {
                    value: 'FUTURE',
                    label: '明日'
                }, {
                    value: 'FINISHED',
                    label: '已结束'
                }, {
                    value: 'OTHER',
                    label: '赛事异常'
                }],
                pickerOptions: {
                    disabledDate: function (time) {
                        return time.getTime() >= new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000);
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'weeks').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-3, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                searchDate: [],
                editDialogVisible: false,
                titlePopu: 0,
                tableData: [],
                sum: 0,
                pageForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    orderStatus: "",
                    matchStage: "",
                    betType: "",
                    pageOrderName: "",
                    pageOrderBy: "",
                    searchDate: "",
                    userCnd: "",
                    orderCnd: "",
                },
                formData: {},
                formRules: {
                    amount: [
                        {required: true, message: '请输入金额', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入备注', trigger: 'blur'}
                    ],
                },
                loading: false,
                queryParams: {},
                isInside: true,
                isLose: false,
                isExp: false,
                isProtect: false,
            }
        },
        methods: {
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                if (self.searchDate) {
                    self.pageForm.searchDate = self.searchDate.toString();
                } else {
                    self.pageForm.searchDate = "";
                }
                self.pageForm.userCnd = "";
                self.pageForm.orderCnd = "";
                if (self.isInside) {
                    if (self.pageForm.userCnd === "") {
                        self.pageForm.userCnd = "isInside";
                    } else {
                        self.pageForm.userCnd = self.pageForm.userCnd + ",isInside";
                    }
                }
                if (self.isLose) {
                    if (self.pageForm.orderCnd === "") {
                        self.pageForm.orderCnd = "isLose";
                    } else {
                        self.pageForm.orderCnd = self.pageForm.orderCnd + ",isLose";
                    }
                    // 失利投资结算状态同时置为'已结算'
                    self.pageForm.orderStatus = 'SETTLED';
                }
                if (self.isExp) {
                    if (self.pageForm.orderCnd === "") {
                        self.pageForm.orderCnd = "isExp";
                    } else {
                        self.pageForm.orderCnd = self.pageForm.orderCnd + ",isExp";
                    }
                }
                if (self.isProtect) {
                    if (self.pageForm.orderCnd === "") {
                        self.pageForm.orderCnd = "isProtect";
                    } else {
                        self.pageForm.orderCnd = self.pageForm.orderCnd + ",isProtect";
                    }
                }
                $.post(base + "/platform/crown/order/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.pagination.list;
                        self.sum = data.data.sum;
                        self.pageForm.totalCount = data.data.pagination.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                sums[7] = '合计USD';
                sums[8] = this.sum.allInvestAmount;
                sums[13] = this.sum.allResultAmount;
                return sums;
            },
            formatAt: function (val) {
                if (val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            openEdit: function (paramVerify) {
                let self = this;
                self.titlePopu = 0;
                this.editDialogVisible = true;
                //打开新增窗口,表单先清空
                this.formData = {
                    id: paramVerify.id,
                    remark: paramVerify.remark
                };
                if (this.$refs["editForm"]) {
                    this.$refs["editForm"].resetFields();
                }
            },
            doEdit: function () { // 提交新增/修改
                var self = this;
                self.$refs["editForm"].validate(function (valid) {
                    if (valid) {
                        //titlePopu=0是新增,1是修改
                        $.post(base + "/platform/crown/order/editDo", self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.doSearch();
                                self.editDialogVisible = false;
                                self.formData = {}
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                // 修改备注按钮
                if ("editDo" == command.type) {
                    this.openEdit(command.row);
                }
                // 手动结算
                else if ("manual" == command.type) {
                    let msg = '确定结算 [订单号：' + command.orderNo + ']';
                    self.$confirm(msg, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        callback: function (a, b) {
                            if ("confirm" == a) {//确认后再执行
                                $.post(base + "/platform/crown/order/manual/" + command.id, function (data) {
                                    if (data.code == 0) {
                                        self.$message({
                                            message: data.msg,
                                            type: 'success'
                                        });
                                        self.doSearch();
                                    } else {
                                        self.$message({
                                            message: data.msg,
                                            type: 'error'
                                        });
                                    }
                                }, "json");
                            }
                        }
                    });
                }
                // else if ("revert" == command.type) {
                //     let msg = '确定撤销 [订单号：' + command.orderNo + ']';
                //     self.$confirm(msg, '提示', {
                //         confirmButtonText: '确定',
                //         cancelButtonText: '取消',
                //         type: 'warning',
                //         callback: function (a, b) {
                //             if ("confirm" == a) {//确认后再执行
                //                 $.post(base + "/platform/crown/order/revert?id=" + command.id, function (data) {
                //                     if (data.code == 0) {
                //                         self.$message({
                //                             message: data.msg,
                //                             type: 'success'
                //                         });
                //                         self.doSearch();
                //                     } else {
                //                         self.$message({
                //                             message: data.msg,
                //                             type: 'error'
                //                         });
                //                     }
                //                 }, "json");
                //             }
                //         }
                //     });
                // } else if ('delete' == command.type) {
                //     let msg = '确定删除 [订单号：' + command.orderNo + ']';
                //     self.$confirm(msg, '提示', {
                //         confirmButtonText: '确定',
                //         cancelButtonText: '取消',
                //         type: 'warning',
                //         callback: function (a, b) {
                //             if ("confirm" == a) {//确认后再执行
                //                 $.post(base + "/platform/crown/order/delete?id=" + command.id, function (data) {
                //                     if (data.code == 0) {
                //                         self.$message({
                //                             message: data.msg,
                //                             type: 'success'
                //                         });
                //                         self.doSearch();
                //                     } else {
                //                         self.$message({
                //                             message: data.msg,
                //                             type: 'error'
                //                         });
                //                     }
                //                 }, "json");
                //             }
                //         }
                //     });
                // }
            },
        },
        created: function () {
            this.pageData();
        }
    });
</script>

<!--#
}
#-->